<template>
  <div>
    <!-- 登录 -->
   <van-nav-bar title="黑马头条-登录"/>
<div>
  <!-- 表单部分 以及按钮部分
  van-nav-bar整体表单组件
  @submit ->自定义事件（提交事件）
  van-field 输入框（表单一项）
  1、输入框name属性="用户名"
  表单整体提交时默认收集一个提交对象
  往后台发送的参数就是name里值
  {"用户名":"页面值"}
  2、label属性输入框左侧文本
  3、rules属性配置检验规则
  ：属性名='表达式'
  属性名="字符串"
   -->
<van-form @submit="onSubmit">
  <van-field
    v-model="user.mobile"
    required
    name="mobile"
    label="手机号"
    placeholder="请输入11位手机号"
    :rules="[{ required: true, message: '请填写手机号',
    pattern:/^1[3-9]\d{9}$/
    //正则匹配
    }]"
  />
  <van-field
    v-model="user.code"
    type="password"
    required
    name="code"
    label="密码"
    placeholder="请输入6位密码"
    :rules="[{ required: true, message: '请填写密码',
    //密码正则匹配
    pattern:/^\d{6}$/ }]"

  />
  <div style="margin: 16px;">
    <!--  -->
    <van-button round block type="info" native-type="submit"
    :disabled='isLoading'
    :loading="isLoading"
    loading-text="正在登陆中..."
    >提交</van-button>
  </div>
</van-form>
</div>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
import { Notify } from 'vant'
import { setToken } from '@/utils/token.js'
export default {
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: ''// 验证码（密码-必须是246810
        // 规定死的，无论手机号是什么）
      },
      isLoading: false

    }
  },
  methods: {
    async onSubmit (values) {
      console.log('submit', values)
      console.log(this.user)

      // 状态设置true 控制启动加载
      this.isLoading = true

      try {
        const res = await loginAPI(this.user)
        console.log(res)
        Notify({ type: 'danger', message: '登录成功拉!!!' })
        setToken(res.data.data.token)
        // 跳转一定要写在最后 ---尽量最后执行
        // locaton.href -> 当前浏览器地址和要跳转的地址一样(不包含#后面锚点信息)->不会刷新网页
        // 地址改变，就会导致网页刷新
        // this.$souter.push()压栈（会产生历史记录，可以回退）,this.router.replace() 替换不会产生历史记录不能回退
        this.$router.replace({
          path: '/layout/hone' // 因为我们路由规则里/layout里没有重定向，所以直接在这里写全
        })
      } catch (err) {
        // Promise内ajax抛出错误，直接进入这里
        Notify({ type: 'danger', message: '账号或密码错误' })
      }

      this.isLoading = false// 网络请求完成无论成功/报错,把状态关掉
    }
  }

}
</script>

<style scoped lang='less' >
// 此类名是Van-nav-bar组件内根标签
// .van-nav-bar{
//   background-color: #007bff;
// }
// /deep/ .van-nav-bar__title{
//      color: white;
// }
</style>
